<template>
    <el-card class="box-card">
        <div class="top speech" ref="top">
            {{ reminderStatus }}
        </div>
        <div class="medicineReminder" v-for="remindItem in remindItemList" :key="remindItem.id">
            <div class="left">
                <img src="@/assets/images/medicineClockView/medicine.png" alt="">
                <span class="speech">{{ remindItem.name }}</span>
            </div>
            <div class="right">
                <span class="speech">{{ remindItem.dosage }}</span>
                <el-button v-if="!remindItem.finished" class="btnFocus speech"
                           @click="takeMedicine(remindItem.id)">服用
                </el-button>
                <el-button v-else class="btnFocus isFinished" @click="takeMedicine(remindItem.id)">已服用</el-button>
            </div>
        </div>
    </el-card>
</template>


<script>

export default {

    props: {
        currentDate: {
            type: Date,
            required: true
        },
        timeStamp: {
            type: String,
            required: true
        },
        remindItemList: {
            type: Array,
            required: true
        }
    },

    data() {
        return {
            reminderStatus: "",

            // 本页面的计时器
            interval: null
        }
    },

    methods: {
        // 服药事件
        takeMedicine(remindItemId) {
            this.$emit('takeMedicine', remindItemId)
        },

        // 更新状态
        updateReminderStatus() {
            let topText = this.$public.formatTimeStampToHHmm(this.timeStamp)
            const topEle = this.$(this.$refs.top)
            const nowTimeStamp = this.$public.dateToTimeStampString(new Date())
            topEle.removeClass("isFinished")
            topEle.removeClass("isStart")
            topEle.removeClass("isLate")
            if (this.remindItemList.every(remindItem => remindItem.finished)) {
                topText += " 已服用"
                topEle.addClass("isFinished")
            } else {
                if (this.$public.dateToTimeStampString(this.currentDate) <= nowTimeStamp) {
                    if (this.$public.formatTimeStampToHHmm(this.timeStamp) < this.$public.formatTimeStampToHHmm(nowTimeStamp)) {
                        topText += " 超时未服"
                        topEle.addClass("isLate")

                    } else {
                        topText += " 即将开始"
                        topEle.addClass("isStart")
                    }
                } else {
                    topText += " 即将开始"
                    topEle.addClass("isStart")
                }
            }
            this.reminderStatus = topText
        }
    },

    mounted() {
        this.updateReminderStatus()
        this.interval = setInterval(() => {
            this.updateReminderStatus()
        }, 500)
    },

    beforeDestroy() {
        if (this.interval)  {
            clearInterval(this.interval)
        }
    }
}
</script>


<style lang="less" scoped>
.box-card {
    width: 90%;
    box-shadow: none;
    border-radius: 15px;

    .top {
        margin: auto;
        border-radius: 0 0 5px 5px;
        width: 52%;
        padding: 8px;
        margin-bottom: 8px;
        text-align: center;
        font-size: 17px;
        color: white;
        font-weight: bold;
    }

    .isLate {
        background-color: #f1ca05;
    }

    .isStart {
        background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 1);
    }

    .isFinished {
        background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 0.3);
    }

    .medicineReminder {
        width: 100%;
        height: 100%;
        margin-bottom: 8px;

        .left {
            float: left;
            display: flex;
            align-items: center;
            width: 60%;

            img {
                width: 25px;
                margin-right: 8px;
            }
        }

        .right {
            width: 40%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 12px;
                outline: none;
                border: none;
                background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 0.6);
            }

            .isFinished {
                opacity: 0.5;
            }
        }

        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            font-size: 18px;
        }
    }

}

::v-deep {
    .el-card__body {
        padding-top: 0;
    }
}
</style>